<template>
  <van-tabbar route fixed>
  <van-tabbar-item to="/home/home" icon="wap-home">首页</van-tabbar-item>
  <van-tabbar-item to="/home/classify" icon="apps-o">分类</van-tabbar-item>
  <van-tabbar-item id="shop-car" :badge="badge" to="/home/shopping" icon="cart">购物车</van-tabbar-item>
  <van-tabbar-item to="/home/my" icon="manager">我的</van-tabbar-item>
</van-tabbar>
</template>

<script>
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState({
      counterMap: (state) => state.counterMap,
    }),
    badge () {
      const count = Object.values(this.counterMap).reduce((prev, next) => prev + next, 0);
      if (count > 99) {
        return '99+'
      }
      return count;
    }
  }
}
</script>

<style>

</style>
